<template>
  <div>
    <h1>父组件</h1>
    <children-com>
      <h3 slot="head">我是在父组件里面写的 html 结构</h3>
      <button slot="foot">我是在父组件里面写的 button</button>

      <!-- 作用域插槽的本质: 在父组件里面使用子组件的数据 -->
      <!-- 旧写法: slot-scope="obj" 接收子组件中 slot 标签上传递的数据, 获取到的是一个对象 -->
      <!-- <div slot-scope="aaa">{{ aaa }}</div> -->
      <!-- v-slot 是最新的写法 - vue2.6和vue3 默认的写法; v-slot 可以简写为 # 号 -->
      <template #default="aaa">
        <div>{{ aaa }}</div>
      </template>

      <!--  -->
      <template #second="test">
        <div>{{ test }}</div>
      </template>
    </children-com>
  </div>
</template>

<script>
import ChildrenCom from './ChildrenCom.vue'
export default {
  components: { ChildrenCom },
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style>

</style>
